<template>
  <div class="bd">
    商品名称： <input type="text" placeholder="戴尔DELL成就3400" />
    <el-button class="open1" :plain="true" @click="open1">EF访问数库</el-button
    ><el-button class="open2" :plain="true" @click="open2"
      >Dapper访问数库</el-button
    >
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";

const open1 = () => {
  ElMessage({
    showClose: true,
    message: "EF",
  });
};
const open2 = () => {
  ElMessage({
    showClose: true,
    message: "Dapper",
  });
};
</script>
<style scoped>
.bd {
  font-size: 18px;
  margin-top: 20%;
  margin-left: 5%;
}
.bd input {
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.open1,
.open2 {
  height: 30px;
  color: white;
  font-size: 15px;
  margin-left:30px;
}
.open1 {
  background-color: rgb(76, 165, 209);
}
.open2 {
  background-color: rgb(130, 194, 34);
}
</style>
